<template>
	<view class="details">
		<view class="record-wrap__head">
			<view class="head-search flex-row-between">
				<view class="head-search__title" @tap="showSearchPopup">
					{{ activeText }}
				</view>
				<view class="head-search__title" @tap="showDatePopup">
					{{ queryParam.startTime }}
				</view>
				<view class="rule flex-row-center" @tap="toRules"
					style="font-size: 30rpx;font-family: PingFang SC-Medium, PingFang SC;font-weight: 400;color: #6DB12E;">
					详细规则
					<view class="arrows_r"></view>
				</view>
			</view>
			<view class="head-tabs flex-row-between" v-if="showType">
				<view class="head-tabs__item flex-column-start">
					<view class="count">{{0}}</view>
					<view class="title">{{type==0?'收益':'预计收益'}}</view>
				</view>
				<view class="head-tabs__item flex-column-start">
					<view class="count">{{0}}</view>
					<view class="title">{{type==0?'拉新人数':'消费订单'}}</view>
				</view>
				<view class="head-tabs__item flex-column-start">
					<view class="count">{{0}}</view>
					<view class="title">{{type==0?'消费人数':'消费金额'}}</view>
				</view>
			</view>
		</view>
		<view class="inviteNewUserList" v-if="showType">
			<view class="inviteNewUserItem" v-for="(item, index) in detailList" :key="index">
				<view>
					<view> {{ item.name }} </view>
					<view> {{ item.date }}</view>
				</view>
				<view>{{ item.details }}</view>
			</view>
		</view>
		<view class="pullNewUserList">
			<view class="pullNewUserItem" v-for="(item, index) in totalList" :key="index">
				<view>
					<view> {{ item.title }} </view>
					<view :style="{ color :item.status=='已结算'? bgcolor:null}"> {{ item.status }}</view>
				</view>
				<view>
					<view> {{ item.date }} </view>
					<view> {{ item.details }}</view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="showTime" mode="year-month" v-model="currentDate" :closeOnClickOverlay='true'
			@close="onClose" @cancel='onCancel' @confirm="onConfirm" :itemHeight="100" />
		<u-popup :show="searchPopup" mode="top" :custom-style="{
    	'width':'702rpx','margin':'120rpx 24rpx 0','border-radius': '16rpx'
    }" @close="closeSearchPopup">
			<view class="search-popup">
				<view :class="active === item.value ? 'title flex-row-center on' : 'title flex-row-center'"
					:data-value="item.value" @tap="onSelect" v-for="(item, index) in options" :key="index">
					{{ item.label }}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		formatYMTime
	} from '../../../../utils/util';
	var promotion_1 = require("../../../../api/marketing/promotion");
	const {
		getBillList,
		getExpenseList
	} = promotion_1
	var app = getApp();
	export default {
		data() {
			return {
				showType: false,
				bgcolor: uni.getStorageSync("defaultColor_Green"),
				currentDate: new Date().getTime(),
				showTime: false,
				dateText: '123',
				searchPopup: false,
				activeText: '全部',
				active: 0,
				options: [{
						label: '全部',
						value: 0
					},
					{
						label: '未结算',
						value: 1
					},
					{
						label: '已结算',
						value: 2
					}
				],
				queryParam: {
					current: 1,
					size: 10,
					startTime: formatYMTime(new Date().getTime()),
					endTime: formatYMTime(new Date().getTime()),
					settlementStatus: 0
				},
				totalPage: 0,
				detailList: [{
						name: "张三",
						date: "2022-03-05 ",
						details: "50积分、5元优惠券、10元奖励金、 5次免服务费 ",
					},
					{
						name: "李四",
						date: "2022-03-05 ",
						details: "5元优惠券 ",
					},
					{
						name: "王伟",
						date: "2022-03-05 ",
						details: "50积分、5元优惠券、10元奖励金、 5次免服务费 ",
					},
				],
				totalList: [{
						title: "账单周期：3.28-3.29",
						status: "未结算",
						date: "2022.03.05 15:22:33",
						details: "￥20000",
					},
					{
						title: "账单周期：3.28-3.29",
						status: "未结算",
						date: "2022.03.05 15:22:33",
						details: "￥20000",
					},
					{
						title: "账单周期：3.28-3.29",
						status: "已结算",
						date: "2022.03.05 15:22:33",
						details: "￥20000",
					},
				],
				type: 0
			};
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
				this.getList()
			}
		},
		onReachBottom() {
			// if (this.queryParam.current < this.totalPage) {
			//     this.setData({
			//         queryParam: {
			//             ...this.queryParam,
			//             current: this.queryParam.current + 1
			//         },
			//     })
			//     this.getList()
			// }else{
			// 	uni.showToast({
			// 		title: '已经到底了',
			// 		icon: 'none',
			// 		duration: 2000
			// 	});
			// }
		},
		methods: {
			getList() {
				if (this.queryParam.settlementStatus === 0) {
					delete this.queryParam.settlementStatus;
				}
				let type = this.type
				//0 拉新 1消费
				if (type == 0) {
					getBillList(this.queryParam)
				} else {
					// getExpenseList(this.queryParam)
				}
			},
			onConfirm(e) {
				console.log(e, '这是什么')
				this.resetQueryParam();
				this.setData({
					showTime: false,
					'queryParam.startTime': formatYMTime(e.value) || '',
					'queryParam.endTime': formatYMTime(e.value) || ''
				});
				this.getList();
			},
			resetQueryParam() {
				this.queryParam.current = 1;
				this.totalList = [];
			},
			//推广规则
			toRules() {
				uni.navigateTo({
					url: '../rules_details/rules_details'
				});
			},
			showSearchPopup() {
				this.setData({
					searchPopup: true
				});
			},
			showDatePopup() {
				this.setData({
					showTime: true
				});
			},
			closeSearchPopup() {
				this.setData({
					searchPopup: false
				});
			},
			onCancel() {
				this.setData({
					showTime: false
				});
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			onSelect(e) {
				const {
					value
				} = e.currentTarget.dataset;
				this.resetQueryParam();
				this.queryParam.settlementStatus = value;
				this.setData({
					active: value,
					activeText: this.options.find((item) => item.value === value).label,
					searchPopup: false
				});
				this.getList();
			},
			onClose() {
				console.log('占位：函数 onClose 未声明');
			}
		},
	};
</script>

<style lang="less" scoped>
	.details {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	.record-wrap__head {
		padding-bottom: 16rpx;
		position: fixed;
		top: var(--window-top);
		left: 0;
		width: 100%;
		z-index: 1;
		background: #f5f7fa;
		padding: 0 24rpx 16rpx;
		box-sizing: border-box;
	}

	.record-wrap__head .head-search {
		height: 112rpx;
		padding: 0 33rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.record-wrap__head .head-search__title {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #303133;
		position: relative;
		padding-right: 50rpx;
	}

	.record-wrap__head .head-search__title::after {
		border: 12rpx solid transparent;
		border-color: #909399 transparent transparent transparent;
		position: absolute;
		content: '';
		right: 0;
		top: 50%;
	}

	.record-wrap__head .head-tabs {
		height: 106rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		border-radius: 16rpx;
		padding: 0 40rpx;
		line-height: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.record-wrap__head .head-tabs__item .count {
		font-weight: bold;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #303133;
		margin-bottom: 18rpx;
	}

	.record-wrap__head .head-tabs__item .title {
		font-size: 24rpx;
		color: #606266;
	}

	.statistics {
		width: 94%;
		margin: 40rpx auto 0 auto;
		padding: 40rpx 25rpx;
		box-sizing: border-box;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		>view {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			>view:nth-of-type(1) {
				font-size: 30rpx;
				font-weight: 400;
				color: #303133;
			}

			>view:nth-of-type(2) {
				margin-top: 18rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #606266;
			}
		}
	}

	.inviteNewUserList,
	.pullNewUserList {
		width: 94%;
		margin: 120rpx auto 0 auto;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;
		padding: 0 32rpx;
		box-sizing: border-box;

		>view:nth-of-type(1) {
			border: none !important;
		}

	}

	.inviteNewUserItem {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 40rpx 0;
		box-sizing: border-box;
		border-top: 1rpx dashed #C0C4CC;

		>view {
			width: 100%;
		}

		>view:nth-of-type(1) {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			>view:nth-of-type(1) {
				font-size: 30rpx;
				font-weight: 600;
				color: #303133;
			}

			>view:nth-of-type(2) {
				font-size: 24rpx;
				font-weight: 400;
				color: #606266;
			}
		}

		>view:nth-of-type(2) {
			margin-top: 26rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #FC724C;
		}
	}

	.pullNewUserList {}

	.pullNewUserItem {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 40rpx 0;
		box-sizing: border-box;
		border-top: 1rpx dashed #C0C4CC;

		>view {
			width: 100%;
		}

		>view:nth-of-type(1) {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			>view:nth-of-type(1) {
				font-size: 30rpx;
				font-weight: 600;
				color: #303133;
			}

			>view:nth-of-type(2) {
				font-size: 24rpx;
				font-weight: 400;
				color: #606266;
			}
		}

		>view:nth-of-type(2) {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 26rpx;

			>view:nth-of-type(1) {
				font-size: 24rpx;
				font-weight: 400;
				color: #606266;
			}

			>view:nth-of-type(2) {
				font-size: 26rpx;
				font-weight: 400;
				color: #FC724C;
			}
		}
	}

	.search-popup {
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		box-shadow: 3rpx 5rpx 20rpx 0px rgba(192, 196, 204, 0.5);
	}

	.search-popup .title {
		height: 100%;
		font-size: 32rpx;
		color: #606266;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 10rpx;
		background: #a7b3a91f;
	}

	.search-popup .title.on {
		font-weight: bold;
		color: #6DB12E;
		background: #e5ffd5;
	}
</style>